<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button style="margin-bottom: 15px;margin-left: 10px" type="primary"
    @click="productAdd">增加</el-button>
    <!--卡片视图-->
    <el-card>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-input  v-model="queryInfo.query" clearable >
            <el-button slot="append" icon="el-icon-search" ></el-button>
          </el-input>
        </el-col>
      </el-row>
  <el-table
    :data="productList"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <el-table-column prop="id" label="ID" ></el-table-column>
    <el-table-column prop="name" label="商品名称"></el-table-column>
    <el-table-column prop="price" label="价格"></el-table-column>
    <el-table-column label="商品图片" >
      <template slot-scope="scope">
        <el-carousel :interval="4000" type="card" height="80px" indicator-position="none"
                     arrow="never">
          <el-carousel-item v-for="(item,index) in scope.row.imgUrl" :key="index">
            <el-image :src="item"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
    </el-table-column>
    <el-table-column prop="category" label="商品种类"></el-table-column>
    <el-table-column prop="detail" label="商品详情" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="status" label="商品状态"></el-table-column>

    <!--            修改按钮-->
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <el-tooltip
          class="item"
          effect="dark"
          content="编辑"
          :enterable="false"
          placement="top">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            circle
            @click="updateProduct(scope.row.id)"
          ></el-button>
        </el-tooltip>
        <!--           删除 按钮 -->
        <el-tooltip class="item" effect="dark" content="删除" placement="top">
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            circle
            @click="deleteProduct(scope.row.id)"
          ></el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="queryInfo.pageNum"
    :page-sizes="[5, 10, 20, 30]"
    :page-size="queryInfo.pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
    </el-card>
<!--    编辑对话框-->
    <el-dialog>

    </el-dialog>
  </div>
</template>

<script>
import { request } from '@/network/request';
import { basePath } from '../../commom/commom';

export default {
  name: 'Product',
  data() {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5,
      },
      productList: [],
      // productList: {
      //   id: '',
      //   name: '',
      //   price: '',
      //   imgUrl: '',
      //   categoryId: '',
      //   detail: '',
      //   status: '',
      // },
      total: 0,
      addPruductDialogVisible: false,
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    getProductList() {
      request({
        url: '/product/list',
        params: this.queryInfo,
      })
        .then((res) => {
          if (res.code !== 200) this.$message.error('数据获取失败');
          this.productList = res.data.list;
          this.total = res.data.total;
          for (let i = 0; i < res.data.list.length; i += 1) {
            this.productList[i].imgUrl = res.data.list[i].imgUrl.split(',');
            for (let j = 0; j < this.productList[i].imgUrl.length; j += 1) {
              this.productList[i].imgUrl[j] = basePath + this.productList[i].imgUrl[j];
            }
          }
          this.total = res.data.total;
        });
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      }
      if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getProductList();
    },
    handleCurrentChange(newSize) {
      this.queryInfo.pageNum = newSize;
      this.getProductList();
    },
    deleteProduct(id) {
      request({
        url: `/product/delete/${id}`,
        method: 'delete',
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('删除失败');
        this.getProductList();
        return this.$message.success('删除成功');
      });
    },
    updateProduct(id) {
      this.$router.push({ path: `/product/edit/${id}` });
    },
    productAdd() {
      this.$router.push({ path: '/product/add' });
    },
  },
};
</script>

<style scoped>

</style>
